<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="UTF-8">
  <title th:text="${course.couName} + ' - 编辑章节 - 企业培训平台'">编辑章节 - 企业培训平台</title>
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <style>
    /* 可以为表单添加一些简单的样式 */
    .form-container { /* 添加一个容器来包裹表单 */
      background-color: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      max-width: 800px; /* 限制表单最大宽度 */
      margin: 20px auto; /* 居中并添加上下边距 */
    }

    .form-group {
      margin-bottom: 1rem; /* 使用 rem 单位 */
    }

    .form-group label {
      display: block;
      margin-bottom: 0.5rem; /* 使用 rem 单位 */
      font-weight: bold;
      color: #495057;
    }

    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group input[type="file"], /* 添加文件输入框样式 */
    .form-group textarea {
      width: 100%;
      padding: 0.5rem 0.75rem; /* 使用 rem 单位 */
      font-size: 1rem;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem; /* 使用 rem 单位 */
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .form-group input[type="text"]:focus,
    .form-group input[type="number"]:focus,
    .form-group input[type="file"]:focus, /* 添加文件输入框焦点样式 */
    .form-group textarea:focus {
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .form-actions {
      margin-top: 1.5rem; /* 使用 rem 单位 */
      text-align: right; /* 按钮靠右 */
    }

    .form-actions button,
    .form-actions a {
      margin-left: 0.5rem; /* 使用 rem 单位 */
      margin-right: 0; /* 移除右侧边距 */
    }
  </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
  <div class="container">
    <h1 class="page-title" th:text="${course.couName} + ' - 编辑章节'">编辑章节</h1>

    <div th:if="${errorMessage}" class="alert alert-danger">
      <p th:text="${errorMessage}"></p>
    </div>
    <div th:if="${successMessage}" class="alert alert-success">
      <p th:text="${successMessage}"></p>
    </div>

    <div class="form-container">
      <form th:action="@{/chapter/edit}" th:object="${chapter}" method="post" enctype="multipart/form-data">
        <input type="hidden" th:field="*{id}">
        <input type="hidden" th:field="*{couId}">
        <input type="hidden" th:field="*{chapterUrl}">

        <div class="form-group">
          <label for="chapterName">章节名称:</label>
          <input type="text" id="chapterName" th:field="*{chapterName}" required>
        </div>

        <div class="form-group">
          <label for="videoFile">上传新视频文件 (可选):</label>
          <input type="file" id="videoFile" name="videoFile" accept="video/*">
          <small class="form-text text-muted">选择新文件将替换现有视频。当前视频: <span th:text="${chapter.chapterUrl}"></span></small>
        </div>

        <div class="form-group">
          <label for="currentChapterUrl">当前章节地址:</label>
          <input type="text" id="currentChapterUrl" th:value="${chapter.chapterUrl}" readonly class="form-control-plaintext">
          <small class="form-text text-muted">如果您想修改为新的外部URL，请上传新视频或手动更改。</small>
        </div>

        <div class="form-group">
          <label for="chapterDuration">章节时长 (秒):</label>
          <input type="number" id="chapterDuration" th:field="*{chapterDuration}" min="0" placeholder="例如：3600">
        </div>

        <div class="form-group">
          <label for="chapterOrder">排列序号:</label>
          <input type="number" id="chapterOrder" th:field="*{chapterOrder}" required>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary">更新章节</button>
          <a th:href="@{/chapter/manage/{courseId}(courseId=${chapter.couId})}" class="btn btn-secondary">取消</a>
        </div>

      </form>
    </div>
  </div>
</div>
</body>
</html>